<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<script type="text/javascript">
	function check() {
		var f = document.memberForm;
		var idPs=/^[0-9a-zA-Z]{4,12}$/; 
		var eCheck=/^([0-9a-zA-Z_-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/;
		if (f.id.value == "") {
			alert("아이디를 입력해주세요.");
			f.id.focus();
			return false;
		}
		if (f.pwd.value == "") {
			alert("비밀번호를 입력해주세요.");
			f.pwd.focus();
			return false;
		} 
		if (f.name.value == "") {
			alert("이름을 입력해주세요.");
			f.name.focus();
			return false;
		}
		if (f.zipcode.value == "") {
			alert("우편번호를 입력해주세요.");
			f.zipcode.focus();
			return false;
		}
		if (f.email.value == "") {
			alert("이메일을 입력해주세요.");
			f.email.focus();
			return false;
		}
		if(!idPs.test(f.id.value)){
			alert("유효한 아이디 형식이 아닙니다.");
			f.id.value=""; 
			f.id.focus();  
			return false;
     	}
		if (f.nickname.value == "") {
			alert("닉네임을 입력해주세요.");
			f.nickname.focus();
			return false;
		}
		if (f.pwd.value != f.pwd2.value) {
			alert("비밀번호를 확인해주세요.");
			f.pwd.focus();
			return false;
		} else {
			return true;
		}
	}
	function openConfirmId(memberForm) {
		var idPs=/^[0-9a-zA-Z]{4,12}$/; 
		var eCheck=/^([0-9a-zA-Z_-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/;
		var url = "memberIdChkAction.action?id="
				+ document.memberForm.id.value;

		var f = document.memberForm;

		if (f.id.value == "") {
			alert("아이디를 입력해주세요.");
			f.id.focus();
			return false;
		}
		if(!idPs.test(f.id.value)){
			alert("유효한 아이디 형식이 아닙니다.");
			f.id.value=""; 
			f.id.focus();  
			return false;
		}

		open(
				url,
				"confirm",
				"toolbar=no, location=no, status=co, menubar=no, scrollbars=no, resizable=no, width=400, height=200");
	}
	function openConfirmNickname(memberForm) {
		var f = document.memberForm;
		var url = "memberNicknameChkAction.action?nickname="
				+ f.nickname.value;
		//alert(f.nickname.value);
		if (f.nickname.value == "") {
			alert("닉네임을 입력해주세요.");
			f.nickname.focus();
			return false;
		}

		open(
				url,
				"confirm",
				"toolbar=no, location=no, status=co, menubar=no, scrollbars=no, resizable=no, width=400, height=200");
	}

	function openZipcode(memberForm) {
		var url = "zipCheckAction.action";
		open(
				url,
				"confirm",
				"toolbar=no, location=no, status=no, menubar=no, scrollbars=yes, resizable=no, width=410, height=400");
	}
	function chknum(){
		var f = document.memberForm;
	    max = 2; 
	    count = 0;
	    for (var i = 0; i < f["hobby"].length; i++) {
	        if (f["hobby"][i].checked) count++;
	    }

	    if (count > max) {
	        alert(max + " 개이상 체크가 불가능합니다");
	        return false;
	    }

	}

</script>

<h2 class="page_title"><strong>회원 가입</strong></h2>
<form name="memberForm" action="joinComplete.action" method="post" onsubmit="return check(this)">
	<table class="table_form">
		<tr>
			<th colspan="2" class="form_info">필수 입력 항목입니다.</th>
		</tr>
		<tr>
			<th>ID</th>
			<td>
				<input type="text" name="id" style="ime-mode: disabled;" />
				<input type="button" name="confirmid" value="중복확인" onclick="openConfirmId(this.form)" />
				*아이디는 4~12글자 숫자와 영어만 가능합니다
			</td>
		</tr>
		<tr>
			<th>PASSWORD</th>
			<td><input type="password" name="pwd" style="ime-mode: disabled;" /></td>
		</tr>
		<tr>
			<th>CONFIRM PASSWORD</th>
			<td><input type="password" name="pwd2" style="ime-mode: disabled;" /></td>
		</tr>
		<tr>
			<th>NAME</th>
			<td><input type="text" name="name" value="<s:property value="paramClass.getName()" />" readonly="readonly" /></td>
		</tr>
		<tr>
			<th>AGE</th>
			<td><input type="text" name="age" class="input_num" />세</td>
		</tr>
		<tr>
			<th>GENDER</th>
			<td>
				<input type="radio" name="gender" value="남자" id="male" checked="checked" /><label for="male">남성</label> 
				<input type="radio" name="gender" value="여자" id="female" /><label for="female">여성</label>
			</td>
		</tr>
		<tr>
			<th>NICKNAME</th>
			<td><input type="text" size="20" name="nickname" />
				<input type="button" name="confirmnickname" class="input" value="중복확인" onclick="openConfirmNickname(this.form)" style="ime-mode: active;" />
			</td>
		</tr>
		<tr>
			<th>EMAIL</th>
			<td><input type="text" size="30" name="email" value="<s:property value="paramClass.getEmail()" />" readonly="readonly" /></td>
		</tr>
		<tr>
			<th>ADDRESS</th>
			<td>
				<p>
					<input type="text" name="zipcode" class="input_num" onclick="openZipcode(this.form)" /> 
					<input type="button" name="zipcode1" class="input" value="우편번호 검색" onclick="openZipcode(this.form)" /> 
				</p>
				<p><input type="text" name="addr1" class="input_long" onclick="openZipcode(this.form)" /></p>
				<p><input type="text" name="addr2" class="input_long" /></p>
			</td>
		</tr>
		<tr>
			<th>MOBILE</th>
			<td>
				<input type="text" name="phone1" maxlength="3" class="input_num" />
				- <input type="text" name="phone2" maxlength="4" class="input_num" />
				- <input type="text" name="phone3" maxlength="4" class="input_num" />
			</td>
		</tr>
		<tr>
			<th colspan="2" class="form_info">선택 입력 항목 입니다.</th>
		</tr>
		<tr>
			<th>HEIGHT</th>
			<td><input type="text" name="height" class="input_num" />cm</td>
		</tr>
		<tr>
			<th>BLOOD</th>
			<td>
				<select name="blood">
					<option value="A">A</option>
					<option value="B">B</option>
					<option value="O">O</option>
					<option value="AB">AB</option>
				</select>형
			</td>
		</tr>
		<tr>
			<th>RELIGION</th>
			<td>
				<select name="religion">
					<option value="선택안함">종교선택</option>
					<option value="기독교">기독교</option>
					<option value="불교">불교</option>
					<option value="천주교">천주교</option>
					<option value="기타">기타</option>
				</select>
			</td>
		</tr>
		<tr>
			<th>HOBBY</th>
			<td><input type="checkbox" name="hobby" value="등산" onClick="return chknum();" />등산
					<input type="checkbox" name="hobby" value="게임" onClick="return chknum();" />게임 
					<input type="checkbox" name="hobby" value="독서" onClick="return chknum();" />독서
					<input type="checkbox" name="hobby" value="영화감상" onClick="return chknum();" />영화감상 
					<input type="checkbox" name="hobby" value="음악감상" onClick="return chknum();" />음악감상 
					<input type="checkbox" name="hobby" value="스포츠" onClick="return chknum();" />스포츠
					<input type="checkbox" name="hobby" value="패션" onClick="return chknum();" />패션
					<input type="checkbox" name="hobby" value="자기개발" onClick="return chknum();" />자기개발
			</td>
		</tr>
		<tr>
			<th>STYLE</th>
			<td><select name="style">
					<option value="선택안함">스타일선택</option>
					<option value="섹시한">섹시한</option>
					<option value="애교있는">애교있는</option>
					<option value="쿨한">쿨한</option>
					<option value="전투광">전투광</option>
					<option value="예쁜">예쁜</option>
			</select></td>
		</tr>
		<tr>
			<th>PROFILE</th>
			<td><textarea name="profile" rows="20" cols="30"></textarea></td>
		</tr>
	</table>
	<p class="align_r">
		<input type="reset" value="RESET" />
		<input type="submit" value="JOIN" />
	</p>
</form>